<template>
    <div class="maximum">
	<carousel :lolist="lunrs"></carousel>
	<transition 
	@before-enter="beforeEnter" 
	@enter="enter" 
	@after-enter="afterEnter">
	<div class="nabuo" v-show="nabuofei" ref="Nabuo"></div>
	</transition>
	<div class="mui-card">
				
			</div>
			<div class="mui-card">
				<div class="mui-card-header">{{goote.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<p>
                      市场价：<s>{{goote.market_price}}</s>&nbsp;&nbsp;&nbsp;销售价：
					  <span class="nono">{{goote.sell_price}}</span >

					</p>
					<!-- 绑定数据 -->
					<p class="nene">购买数量：<zijan @getcount="getselect" :max="goote.stock_quantity "></zijan></p>
					<mt-button type="primary" size="small" >立即购买</mt-button>
					<mt-button type="danger" size="small" @click="nabuo">加入购物车</mt-button>
						</div>
				</div>
				<div class="mui-card-footer">页脚</div>
			</div>
				

	<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					  <p>商品名称：{{goote.goods_nc}}</p>
					  <p>商品情况：{{goote.stock_quantity}}件</p>
					  <p>上架时间：{{goote.add_item|binia}}</p>
					  	</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type="primary" size="large" @click="goumai(id)">图文详情</mt-button>
					<mt-button type="danger" size="large" @click="jiru(id)">商品评论</mt-button>
				</div>
			</div>			
    </div>
</template>
<script>
import  carousel  from "../cniues/arousel.vue";
import  zijan  from "../cniues/zijan.vue";
export default {
    data() { 
		return {
			id:this.$route.params.id,
			lunrs:[],
			selectle:1,
			goote:{},
			nabuofei:false,
			
			
		}
	},
	created(){
		this.getters();
		this.getsuzhu();
		//this.nabuo()
	},
	methods: {

		getters(){
        this.$http.get("api/getthumimages/"+this.id).then(retur =>{
         if (retur.body.status==0) {
			   retur.body.message.forEach(items => {
				   items.img=items.src
			   });
			   this.lunrs=retur.body.message;
		   }
		})
		},
		
	
		getsuzhu(){
			 this.$http.get("api/goods/getinfo/"+this.id).then(result=>{
				// console.log(retue);
				 if (result.body.status==0) {
					 this.goote=result.body.message[0];
				 }
			 })
		},
		goumai(id){
         this.$router.push({name:"particulars",params:{id}})
		},
		jiru(id){
         this.$router.push({name:"particulars2",params:{id}})
		},
		nabuo(){
		//	console.log(nabuofei);
			
			this.nabuofei=!this.nabuofei;
			//id:商品id count：商品数量 price:商品价格 selectle:状态选择 true false
			var goood={id:this.id,count:this.selectle,price:this.goote.sell_price,selectle:true};
			//add_ture
			 this.$store.commit("add_ture",goood);
			console.log(this.goote.sell_price);
			
		},
		
		beforeEnter(el){
			//el.style.transfrom="translate(0,0)"
			el.style.transform="translate(0,0)"
		},
		enter(el,done){
		 let nabuoPosition=this.$refs.Nabuo.getBoundingClientRect();
		 let badgePosition=document.getElementById("badge").getBoundingClientRect();
		 const xDist=badgePosition.left-nabuoPosition.left;
		const yDist=badgePosition.top-nabuoPosition.top;

			el.offsetWidth;
		el.style.transform=`translate(${xDist}px,${yDist}px)`;
		 el.style.transition='all 0.8s ease';
		     done();
		},
		afterEnter(el){
			// console.log(this.nabuofei);
			
           this.nabuofei=!this.nabuofei;
		},
	     getselect(count){  
		 this.selectle=count;
		// console.log("ww"+this.selectle);
		 
		}
		},
		

      components:{
	   carousel,
	   zijan
    }
	
}
</script>
<style lang="scss">

.maximum{
	position:relative;
	.nono{
	color: red;
	font-size:16px;
	font-weight: bold;
}
.nene{
	display: flex;
	align-items: center;
}
.mui-card-footer{
	display: block;
	button{
		margin-bottom: 10px;
	}
}
.nabuo{
	width: 20px;
	height: 20px;
	background: red;
	// 圆形
	border-radius: 50%;
	position:absolute;
	z-index: 99;
	top:46%;
	left: 39%;
	// transform:translate(83px,376px)
}
}

</style>
